<script setup lang="ts">
import { ref, shallowRef, onMounted, onUnmounted } from 'vue'
import { IconCaretRight, IconEdit, IconDown } from '@arco-design/web-vue/es/icon'
import dayjs from 'dayjs'

// 表格列定义
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    slotName: 'title',
    width: 300,
    colSpan: (record: any) => {
      // 如果是父级行，合并除了最后一列(进度)之外的所有列
      return record.children ? 8 : 1
    }
  },
  {
    title: '类型',
    dataIndex: 'type',
    slotName: 'type',
    width: 100,
    colSpan: (record: any) => {
      // 如果是父级行，这列会被标题列合并，所以返回0
      return record.children ? 0 : 1
    }
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    width: 100,
    colSpan: (record: any) => (record.children ? 0 : 1)
  },
  {
    title: '负责人',
    dataIndex: 'owner',
    slotName: 'owner',
    width: 120,
    colSpan: (record: any) => (record.children ? 0 : 1)
  },
  {
    title: '优先级',
    dataIndex: 'priority',
    slotName: 'priority',
    width: 100,
    colSpan: (record: any) => (record.children ? 0 : 1)
  },
  {
    title: '开始时间',
    dataIndex: 'startTime',
    slotName: 'startTime',
    width: 120,
    colSpan: (record: any) => (record.children ? 0 : 1)
  },
  {
    title: '截止时间',
    dataIndex: 'endTime',
    slotName: 'endTime',
    width: 120,
    colSpan: (record: any) => (record.children ? 0 : 1)
  },
  {
    title: '附件',
    dataIndex: 'attachments',
    width: 80,
    colSpan: (record: any) => (record.children ? 0 : 1)
  },
  {
    title: '进度',
    dataIndex: 'progress',
    slotName: 'progress',
    width: 140,
    fixed: 'right'
  }
]

// 模拟数据 - 多级结构
const tableData = ref([
  {
    key: '1',
    title: '启动阶段',
    children: [
      {
        key: '1-1',
        title: '【示例】制定项目计划',
        type: '需求',
        status: '进行中',
        owner: '郭洪',
        priority: '最高',
        startTime: '2024年12月26日',
        endTime: '1月1日',
        attachments: 0,
        progress: 0,
        level: 1
      },
      {
        key: '1-2',
        title: '【示例】组建项目团队',
        type: '任务',
        status: '进行中',
        owner: '郭洪',
        priority: '最高',
        startTime: '2024年12月26日',
        endTime: '2027年4月2日',
        attachments: 0,
        progress: 0,
        level: 1
      },
      {
        key: '1-3',
        title: '【示例】项目启动会',
        status: '进行中',
        owner: '郭洪',
        priority: '普通',
        startTime: '1月3日',
        endTime: '2027年4月2日',
        attachments: 0,
        progress: 0,
        level: 1
      }
    ],
    progress: 0
  },
  {
    key: '2',
    title: '执行阶段',
    children: [
      {
        key: '2-1',
        title: '【示例】设计数据收集方案和工具',
        status: '未开始',
        owner: '郭洪',
        priority: '普通',
        attachments: 0,
        progress: 0,
        level: 1
      },
      {
        key: '2-2',
        title: '【示例】执行数据收集活动',
        status: '未开始',
        owner: '黄特曼',
        attachments: 0,
        progress: 0,
        level: 1
      }
    ],
    progress: 0
  },
  {
    key: '3',
    title: '验收阶段',
    children: [
      {
        key: '3-1',
        title: '【示例】准备现场汇报资料',
        status: '未开始',
        attachments: 0,
        progress: 0,
        level: 1
      },
      {
        key: '3-2',
        title: '【示例】移交产出文件',
        status: '未开始',
        attachments: 0,
        progress: 0,
        level: 1
      }
    ],
    progress: 0
  }
])

// 获取状态对应的颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    进行中: 'orange',
    未开始: 'gray',
    已完成: 'green'
  }
  return colorMap[status] || 'blue'
}

// 获取优先级对应的颜色
const getPriorityColor = (priority: string) => {
  const colorMap: Record<string, string> = {
    最高: 'red',
    高: 'orange',
    普通: 'blue',
    低: 'gray'
  }
  return colorMap[priority] || 'blue'
}

// 新增获取类型对应的颜色函数
const getTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    需求: 'blue',
    任务: 'green'
  }
  return colorMap[type] || 'gray'
}

// 添加表格实例引用
const tableRef = ref()
// 添加展开的行的 key 集合
const expandedKeys = ref<(string | number)[]>([])

// 添加以下响应式变量
const editingKey = ref<string | null>(null) // 当前正在编辑的行的key
const editingTitle = ref('') // 编辑时的临时标题值

// 添加类型选项常量
const TYPE_OPTIONS = [
  { label: '需求', value: '需求' },
  { label: '任务', value: '任务' },
  { label: '缺陷', value: '缺陷' },
  { label: '文档', value: '文档' }
]

// 添加编辑类型相关的响应式变量
const editingTypeKey = ref<string | null>(null)

// 添加状态选项常量
const STATUS_OPTIONS = [
  { label: '未开始', value: '未开始' },
  { label: '进行中', value: '进行中' },
  { label: '已完成', value: '已完成' },
  { label: '暂停中', value: '暂停中' },
  { label: '已关闭', value: '已关闭' }
]

// 添加编辑状态相关的响应式变量
const editingStatusKey = ref<string | null>(null)

// 修改负责人选项常量
const OWNER_OPTIONS = [
  { label: '郭洪', value: '郭洪' },
  { label: '黄特曼啊啊啊', value: '黄特曼' },
  { label: '张三', value: '张三' },
  { label: '李四', value: '李四' }
]

// 添加编辑负责人相关的响应式变量
const editingOwnerKey = ref<string | null>(null)

// 在 script setup 中添加
const popupContainer = document.body

// 添加时间编辑相关的响应式变量
const editingTimeKey = ref<string | null>(null)
const editingTimeField = ref<'startTime' | 'endTime' | null>(null)

// 添加时间快捷选项
const timeShortcuts = [
  {
    label: '今天',
    value: () => new Date()
  },
  {
    label: '一周后',
    value: () => {
      const date = new Date()
      date.setDate(date.getDate() + 7)
      return date
    }
  }
]

// 添加日期格式化函数
const formatDate = (date: string | Date | null) => {
  if (!date) return ''
  const d = new Date(date)
  if (isNaN(d.getTime())) {
    // 尝试解析中文日期格式
    const year = date.toString().match(/\d{4}年/) ? date.toString().match(/\d{4}年/)![0].replace('年', '') : new Date().getFullYear()
    const month = date.toString().match(/\d{1,2}月/) ? date.toString().match(/\d{1,2}月/)![0].replace('月', '') : '1'
    const day = date.toString().match(/\d{1,2}日/) ? date.toString().match(/\d{1,2}日/)![0].replace('日', '') : '1'
    return new Date(`${year}-${month}-${day}`)
  }
  return d
}

// 添加子节点行点击处理函数
const handleChildRowClick = (record: any, event: Event) => {
  // 检查点击的元素是否在编辑区域内
  const target = event.target as HTMLElement
  if (
    target.closest('.type-cell') ||
    target.closest('.status-cell') ||
    target.closest('.owner-cell') ||
    target.closest('.priority-cell') ||
    target.closest('.time-cell') ||
    target.closest('.edit-icon') ||
    target.closest('.editing-wrapper')
  ) {
    // 如果点击的是编辑区域，不执行行点击事件
    return
  }

  // 这里处理子节点行的点击事件
  console.log('子节点行被点击：', record)
  // 可以添加你的处理逻辑，比如打开任务详情等
}

// 修改原有的行点击处理函数
const handleRowClick = (record: any, event: Event) => {
  if (record.children) {
    // 处理父节点行的展开/收起
    const index = expandedKeys.value.indexOf(record.key)
    if (index > -1) {
      expandedKeys.value.splice(index, 1)
      tableRef.value.expand(record.key, false)
    } else {
      expandedKeys.value.push(record.key)
      tableRef.value.expand(record.key, true)
    }
  } else {
    // 处理子节点行的点击
    handleChildRowClick(record, event)
  }
}

// 添加以下方法
const handleEditTitle = (record: any) => {
  editingKey.value = record.key
  editingTitle.value = record.title
}

const handleSaveTitle = (record: any) => {
  if (editingKey.value === record.key) {
    // 这里可以添加保存到后端的逻辑
    record.title = editingTitle.value
    editingKey.value = null
  }
}

// 添加类型编辑相关的方法
const handleEditType = (record: any, event: Event) => {
  event.stopPropagation()
  editingTypeKey.value = record.key
}

const handleTypeChange = (value: string, record: any) => {
  record.type = value
  editingTypeKey.value = null
  // 这里可以添加保存到后端的逻辑
}

// 添加状态编辑相关的方法
const handleEditStatus = (record: any, event: Event) => {
  event.stopPropagation()
  editingStatusKey.value = record.key
}

const handleStatusChange = (value: string, record: any) => {
  record.status = value
  editingStatusKey.value = null
  // 这里可以添加保存到后端的逻辑
}

// 添加负责人编辑相关的方法
const handleEditOwner = (record: any, event: Event) => {
  event.stopPropagation()
  editingOwnerKey.value = record.key
}

const handleOwnerChange = (value: string, record: any) => {
  record.owner = value
  editingOwnerKey.value = null
  // 这里可以添加保存到后端的逻辑
}

// 添加优先级选项常量
const PRIORITY_OPTIONS = [
  { label: '最高', value: '最高' },
  { label: '高', value: '高' },
  { label: '普通', value: '普通' },
  { label: '低', value: '低' }
]

// 添加编辑优先级相关的响应式变量
const editingPriorityKey = ref<string | null>(null)

// 添加优先级编辑相关的方法
const handleEditPriority = (record: any, event: Event) => {
  event.stopPropagation()
  editingPriorityKey.value = record.key
}

const handlePriorityChange = (value: string, record: any) => {
  record.priority = value
  editingPriorityKey.value = null
  // 这里可以添加保存到后端的逻辑
}

// 修改时间编辑相关的方法
const handleTimeClick = (record: any, field: 'startTime' | 'endTime', event: Event) => {
  event.stopPropagation()
  editingTimeKey.value = record.key
  editingTimeField.value = field
}

const handleTimeChange = (value: any, record: any) => {
  if (editingTimeField.value && value) {
    // 使用 dayjs 格式化日期
    const formattedDate = dayjs(value).format('YYYY年MM月DD日')
    record[editingTimeField.value] = formattedDate
    editingTimeKey.value = null
    editingTimeField.value = null
    // 这里可以添加保存到后端的逻辑
  }
}

const handleTimeCancel = () => {
  editingTimeKey.value = null
  editingTimeField.value = null
}

// 添加点击其他地方关闭时间选择器的方法
const handleDocumentClick = (e: MouseEvent) => {
  const target = e.target as HTMLElement
  if (!target.closest('.time-cell') && !target.closest('.arco-picker-dropdown')) {
    handleTimeCancel()
  }
}

// 在组件挂载时添加点击事件监听
onMounted(() => {
  document.addEventListener('click', handleDocumentClick)
})

// 在组件卸载时移除点击事件监听
onUnmounted(() => {
  document.removeEventListener('click', handleDocumentClick)
})
</script>

<template>
  <div class="task-list-container">
    <!-- 顶部操作区 -->
    <div class="tasks-header">
      <div class="left-operations">
        <a-input-search :style="{ width: '200px' }" placeholder="搜索任务标题 (按Enter搜索)" />
        <a-button-group>
          <a-button>筛选</a-button>
          <a-button>排序</a-button>
          <a-button>分组</a-button>
          <a-button>层级</a-button>
          <a-button>视图</a-button>
          <a-button>更多</a-button>
        </a-button-group>
      </div>
    </div>

    <!-- 任务表格 -->
    <a-table
      ref="tableRef"
      :columns="columns"
      :data="tableData"
      :pagination="false"
      :row-selection="{ type: 'checkbox' }"
      :expandable="{
        defaultExpandAllRows: true,
        expandedKeys: expandedKeys
      }"
      :scroll="{ x: true, y: '100%' }"
      bordered
      @row-click="handleRowClick"
    >
      <!-- 标题列 -->
      <template #title="{ record }">
        <div v-if="record.children" class="parent-row-content">
          {{ record.title }}
        </div>
        <div v-else 
          class="task-title" 
          :style="{ paddingLeft: record.level ? '24px' : '0' }"
        >
          <template v-if="editingKey === record.key">
            <div class="editing-wrapper">
              <a-input
                v-model="editingTitle"
                class="editing-input"
                ref="inputRef"
                @blur="handleSaveTitle(record)"
                @press-enter="handleSaveTitle(record)"
              />
            </div>
          </template>
          <template v-else>
            <div class="title-cell">
              <span>{{ record.title }}</span>
              <div class="edit-icon">
                <a-button
                  type="text"
                  size="mini"
                  @click.stop="handleEditTitle(record)"
                >
                  <template #icon>
                    <icon-edit />
                  </template>
                </a-button>
              </div>
            </div>
          </template>
        </div>
      </template>

      <!-- 类型列 -->
      <template #type="{ record }">
        <div v-if="!record.children" class="type-cell" @click.stop="handleEditType(record, $event)">
          <template v-if="editingTypeKey === record.key">
            <a-select
              v-model="record.type"
              :popup-container="popupContainer"
              :trigger-props="{
                autoFitPopupWidth: false,
                position: 'bl'
              }"
              :style="{ width: '100%' }"
              size="mini"
              @change="(value) => handleTypeChange(value, record)"
              @blur="editingTypeKey = null"
            >
              <a-option
                v-for="option in TYPE_OPTIONS"
                :key="option.value"
                :value="option.value"
              >
                <a-tag :color="getTypeColor(option.value)">
                  {{ option.label }}
                </a-tag>
              </a-option>
            </a-select>
          </template>
          <template v-else>
            <div class="type-content">
              <a-tag :color="getTypeColor(record.type)" v-if="record.type">
                {{ record.type }}
              </a-tag>
              <icon-down class="type-icon" />
            </div>
          </template>
        </div>
      </template>

      <!-- 状态列 -->
      <template #status="{ record }">
        <div v-if="!record.children" class="status-cell" @click.stop="handleEditStatus(record, $event)">
          <template v-if="editingStatusKey === record.key">
            <a-select
              v-model="record.status"
              :popup-container="popupContainer"
              :trigger-props="{
                autoFitPopupWidth: false,
                position: 'bl'
              }"
              :style="{ width: '100%' }"
              size="mini"
              @change="(value) => handleStatusChange(value, record)"
              @blur="editingStatusKey = null"
            >
              <a-option
                v-for="option in STATUS_OPTIONS"
                :key="option.value"
                :value="option.value"
              >
                <a-tag :color="getStatusColor(option.value)">
                  {{ option.label }}
                </a-tag>
              </a-option>
            </a-select>
          </template>
          <template v-else>
            <div class="status-content">
              <a-tag :color="getStatusColor(record.status)" v-if="record.status">
                {{ record.status }}
              </a-tag>
              <icon-down class="status-icon" />
            </div>
          </template>
        </div>
      </template>

      <!-- 负责人列 -->
      <template #owner="{ record }">
        <div v-if="!record.children" class="owner-cell" @click.stop="handleEditOwner(record, $event)">
          <template v-if="editingOwnerKey === record.key">
            <a-select
              v-model="record.owner"
              :popup-container="popupContainer"
              :trigger-props="{
                autoFitPopupWidth: false,
                position: 'bl'
              }"
              :style="{ width: '100%' }"
              size="mini"
              @change="(value) => handleOwnerChange(value, record)"
              @blur="editingOwnerKey = null"
            >
              <a-option
                v-for="option in OWNER_OPTIONS"
                :key="option.value"
                :value="option.value"
              >
                <div class="owner-option">
              
                  <span>{{ option.label }}</span>
                </div>
              </a-option>
            </a-select>
          </template>
          <template v-else>
            <div class="owner-content">
              <div class="owner-info">
                <a-avatar :size="24">{{ record.owner?.substring(0, 1) }}</a-avatar>
                <span class="owner-name">{{ record.owner }}</span>
              </div>
              <icon-down class="owner-icon" />
            </div>
          </template>
        </div>
      </template>

      <!-- 优先级列 -->
      <template #priority="{ record }">
        <div v-if="!record.children" class="priority-cell" @click.stop="handleEditPriority(record, $event)">
          <template v-if="editingPriorityKey === record.key">
            <a-select
              v-model="record.priority"
              :popup-container="popupContainer"
              :trigger-props="{
                autoFitPopupWidth: false,
                position: 'bl'
              }"
              :style="{ width: '100%' }"
              size="mini"
              @change="(value) => handlePriorityChange(value, record)"
              @blur="editingPriorityKey = null"
            >
              <a-option
                v-for="option in PRIORITY_OPTIONS"
                :key="option.value"
                :value="option.value"
              >
                <a-tag :color="getPriorityColor(option.value)">
                  {{ option.label }}
                </a-tag>
              </a-option>
            </a-select>
          </template>
          <template v-else>
            <div class="priority-content">
              <a-tag :color="getPriorityColor(record.priority)" v-if="record.priority">
                {{ record.priority }}
              </a-tag>
              <icon-down class="priority-icon" />
            </div>
          </template>
        </div>
      </template>

      <!-- 开始时间列 -->
      <template #startTime="{ record }">
        <div v-if="!record.children" class="time-cell" @click.stop="handleTimeClick(record, 'startTime', $event)">
          <span>{{ record.startTime }}</span>
          <div v-if="editingTimeKey === record.key && editingTimeField === 'startTime'" class="time-picker-wrapper">
            <a-date-picker
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              :shortcuts="timeShortcuts"
              :popup-visible="true"
              hide-trigger
              @ok="handleTimeChange($event, record)"
              @cancel="handleTimeCancel"
            />
          </div>
        </div>
      </template>

      <!-- 截止时间列 -->
      <template #endTime="{ record }">
        <div v-if="!record.children" class="time-cell" @click.stop="handleTimeClick(record, 'endTime', $event)">
          <span>{{ record.endTime }}</span>
          <div v-if="editingTimeKey === record.key && editingTimeField === 'endTime'" class="time-picker-wrapper">
            <a-date-picker
              show-time
              format="YYYY-MM-DD HH:mm:ss"
              :shortcuts="timeShortcuts"
              :popup-visible="true"
              hide-trigger
              @ok="handleTimeChange($event, record)"
              @cancel="handleTimeCancel"
            />
          </div>
        </div>
      </template>

      <!-- 进度列 -->
      <template #progress="{ record }">
        <div v-if="record.progress !== undefined" class="progress-cell">
          <a-progress :percent="record.progress" :show-text="false" :stroke-width="4" size="mini" />
          <span class="progress-text">{{ record.progress }}%</span>
        </div>
      </template>
    </a-table>
  </div>
</template>

<style scoped>
.task-list-container {
  margin-top: 16px;
  height: calc(100vh - 180px); /* 根据实际页面布局调整这个值 */
  display: flex;
  flex-direction: column;
}

.tasks-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.left-operations {
  display: flex;
  gap: 8px;
  align-items: center;
}

.task-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 8px;
}

.task-title:hover {
  color: #165dff;
}

.owner-name {
  margin-left: 4px;
}

:deep(.arco-table-tr-parent) {
  background-color: var(--color-bg-2);
  cursor: pointer;
  position: relative;
}

:deep(.arco-table-tr-parent::before) {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid var(--color-text-2);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.2s;
}

:deep(.arco-table-tr-parent[aria-expanded='true']::before) {
  transform: translateY(-50%) rotate(90deg);
}

:deep(.arco-table-td) {
  background-color: var(--color-bg-2);
}

.progress-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.progress-text {
  min-width: 35px;
  font-size: 12px;
  color: var(--color-text-3);
}

:deep(.arco-progress) {
  flex: 1;
}

:deep(.expandable-row) {
  cursor: pointer !important;
}

:deep(.arco-table-tr-parent:hover td) {
  background-color: var(--color-fill-1) !important;
}

:deep(.arco-table-tr-parent td) {
  background-color: var(--color-fill-1) !important;
}

:deep(.arco-table-tr-parent td) {
  transition: background-color 0.1s;
}

:deep(.arco-table) {
  border: 1px solid var(--color-neutral-2);
}

:deep(.arco-table-th) {
  background-color: var(--color-bg-2) !important;
  border-right: 1px solid var(--color-neutral-2);
  color: var(--color-text-1);
  font-weight: 500;
}

:deep(.arco-table-td) {
  background-color: var(--color-bg-2) !important;
  border-right: 1px solid var(--color-neutral-2);
  border-bottom: 1px solid var(--color-neutral-2);
  transition: all 0.2s ease;
}

:deep(.arco-table-tr:last-child .arco-table-td) {
  border-bottom: none;
}

:deep(.arco-table-th:last-child),
:deep(.arco-table-td:last-child) {
  border-right: none !important;
}

:deep(.arco-table-tr) {
  cursor: pointer;
}

:deep(.arco-table-tr:hover td) {
  background-color: var(--color-fill-1) !important;
  transition: all 0.2s ease;
}

.parent-row-content {
  font-weight: 500;
  color: var(--color-text-1);
  padding: 0 8px;
  width: 100%;
}

.parent-title {
  margin-left: 8px;
}

:deep(.arco-table-tr-parent) td:first-child {
  background-color: var(--color-fill-1) !important;
}

:deep(.arco-table-tr-parent:hover) td:first-child {
  background-color: var(--color-fill-2) !important;
}

:deep(.arco-table-td[colspan]) {
  padding: 12px 0;
}

/* 确保父级行显示为可点击状态 */
:deep(.arco-table-tr-parent) {
  cursor: pointer;
}

/* 确保展开图标的点击区域不会太小 */
:deep(.arco-table-expand-icon) {
  padding: 8px;
  margin: -8px;
}

/* 表格整体背景色 */
:deep(.arco-table) {
  background-color: var(--color-bg-2);
}

/* 表头样式 */
:deep(.arco-table-th) {
  background-color: var(--color-bg-2) !important;
  border-right: 1px solid var(--color-neutral-2);
  color: var(--color-text-1);
  font-weight: 500;
}

/* 普通行样式 */
:deep(.arco-table-td) {
  background-color: var(--color-bg-2) !important;
  border-right: 1px solid var(--color-neutral-2);
  border-bottom: 1px solid var(--color-neutral-2);
  transition: all 0.2s ease;
}

/* 行悬浮效果 */
:deep(.arco-table-tr:hover td) {
  background-color: var(--color-fill-1) !important;
  transition: all 0.2s ease;
}

/* 父级行样式 */
:deep(.arco-table-tr-parent) {
  background-color: var(--color-bg-2);
}

:deep(.arco-table-tr-parent) td {
  background-color: var(--color-fill-1) !important;
  border-right: none !important;
}

:deep(.arco-table-tr-parent) td:last-child {
  border-left: 1px solid var(--color-neutral-2) !important;
}

/* 父级行悬浮效果 */
:deep(.arco-table-tr-parent:hover) td {
  background-color: var(--color-fill-2) !important;
}

/* 确保选中状态的背景色正确 */
:deep(.arco-table-tr-checked) td {
  background-color: var(--color-bg-2) !important;
}

:deep(.arco-table-tr-checked:hover) td {
  background-color: var(--color-fill-1) !important;
}

.title-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: relative;
}

.edit-icon {
  visibility: hidden;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.title-cell:hover .edit-icon {
  visibility: visible;
}

.editing-wrapper {
  width: 100%;
  height: 100%;
  padding: 4px 0;
}

.editing-input {
  width: 100%;
  height: 100%;
  border: 1px solid rgb(var(--primary-6));
  box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.06);
}

:deep(.editing-input .arco-input-inner-wrapper) {
  height: 100%;
  background-color: var(--color-bg-2);
}

:deep(.editing-input .arco-input) {
  height: 100%;
  padding: 0 8px;
}

.type-cell {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px 8px;
}

.type-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.type-icon {
  font-size: 12px;
  color: var(--color-text-3);
  margin-left: auto;
  visibility: hidden;
}

.type-cell:hover .type-icon {
  visibility: visible;
}

:deep(.arco-tag) {
  margin: 0;
}

/* 让表格容器填充剩余空间 */
:deep(.arco-table-container) {
  height: 100%;
}

/* 确保表格内容区域可以滚动 */
:deep(.arco-table-content) {
  height: 100%;
}

/* 固定列的样式调整 */
:deep(.arco-table-td-fixed-right) {
  background-color: var(--color-bg-2) !important;
}

:deep(.arco-table-td-fixed-right::after) {
  content: '';
  position: absolute;
  top: 0;
  bottom: -1px;
  left: 0;
  width: 10px;
  pointer-events: none;
  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s;
}

/* 确保固定列在hover状态下的背景色正确 */
:deep(.arco-table-tr:hover) .arco-table-td-fixed-right {
  background-color: var(--color-fill-1) !important;
}

.status-cell {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px 8px;
}

.status-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.status-icon {
  font-size: 12px;
  color: var(--color-text-3);
  margin-left: auto;
  visibility: hidden;
}

.status-cell:hover .status-icon {
  visibility: visible;
}

/* 添加或修改以下样式 */
:deep(.arco-select-dropdown) {
  min-width: 120px !important; /* 设置最小宽度 */
}

/* 确保下拉选项内容正确对齐 */
:deep(.arco-select-option) {
  padding: 4px 8px;
  white-space: nowrap;
}

/* 调整标签在下拉选项中的样式 */
:deep(.arco-select-option .arco-tag) {
  width: 100%;
  text-align: center;
}

/* 添加负责人列的样式 */
.owner-cell {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px 8px;
}

.owner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.owner-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.owner-icon {
  font-size: 12px;
  color: var(--color-text-3);
  margin-left: auto;
  visibility: hidden;
}

.owner-cell:hover .owner-icon {
  visibility: visible;
}

.owner-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

/* 调整下拉框样式 */
:deep(.arco-select-dropdown) {
  min-width: 160px !important;
}

:deep(.arco-select-option) {
  padding: 4px 12px;
}

/* 添加优先级列的样式 */
.priority-cell {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 4px 8px;
}

.priority-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.priority-icon {
  font-size: 12px;
  color: var(--color-text-3);
  margin-left: auto;
  visibility: hidden;
}

.priority-cell:hover .priority-icon {
  visibility: visible;
}

/* 修改时间选择相关样式 */
.time-cell {
  position: relative;
  cursor: pointer;
  padding: 4px 8px;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.time-cell:hover {
  background-color: var(--color-fill-1);
}

.time-picker-wrapper {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1000;
}

:deep(.arco-picker-panel) {
  margin: 0;
}
</style>
